<template>
  <div id="leftnav" :style="navwidth" ref="leftnav" :class="navclass">
    <div class="showtrun" @click="navshow">
      <div class="navareacon" :style="navareaconsty">
        <div
          :style="navarea"
          class="navarea"
          v-for="(ite, index) in navarr"
          :key="index"
          @click="noticeTk(ite)"
        >
          {{ ite.names }}
        </div>
      </div>
    </div>
    <div class="cancel" @click="cancel">
        <img src="../assets/img/tianming/captain.png" alt="" width="100%" />
      </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      navclass: "leftnavone",
      navwidth: "",
      navarea: "width: 0%;",
      navareaconsty: '',
      navarr: [
        {
          names: "入江辞圣",
          ids: 1,
        },
        {
          names : '笔记',
          ids: 2,
        },
        {
          names: "公告する",
          ids: 3,
        },
        {
          names: "天气",
          ids: 4,
        },
      ],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.navback);
  },
  methods: {
    
    noticeTk(ite) {
      if (ite.ids === 3) {
        // 公告
        console.log(this.noticeflagxdata());
        this.noticeflagxfun({ ids: true });
      }
      if (ite.ids === 4) {
        // 天气
        console.log(this.tianqifun());
        this.tianqifun({ ids: true });
      }
    },
    // 导航栏的背景
    navback() {
      if (
        document.documentElement.scrollTop >
        document.documentElement.clientHeight / 2
      ) {
        this.navclass = "leftnavtow";
      } else if (
        document.documentElement.scrollTop <
        document.documentElement.clientHeight / 2
      ) {
        this.navclass = "leftnavone";
      }
    },

    // 左侧导航区打开与取消
    navshow() {
      this.$nextTick(() => {
        this.navwidth +=
          "width: 100%;height: 100vh;animation-name: none;border-radius: 0px;transform: translate(0%,-50%);";
          setTimeout(()=>{
            this.navareaconsty += "height:100vh;"
          this.navarea += "opacity: 1;width: 2rem;";
          },1000)
      });
    },
    // 取消
    cancel(){
        this.$nextTick(()=>{
          this.navareaconsty += "height:0vh;"
          setTimeout(()=>{
            this.navwidth = "";
          },1000)
          
        })
    },
    ...mapGetters(["noticeflagxdata",'noticeflagxdata']),
    ...mapMutations(["noticeflagxfun",'tianqifun']),
  },
};
</script>
<style lang="less" scoped>
#leftnav {
  width: 1rem;
  height: 1rem;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 9999;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  .showtrun {
    overflow: hidden;
    font-size: 0.4rem;
    height: 100vh;
    display: flex;
    align-items: center;
    .navareacon {
      height: 0%;
      transition: 1s;
      overflow: hidden;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
    .navarea {
      height: 1rem;
      overflow: hidden;
      text-align: center;
    }
  }
}
.leftnavone {
  background-color: rgba(17, 17, 17, 0.5);
  color: #fff;
  animation-name: leftnav;
  animation-duration: 4s;
  opacity: 0.5;
  animation-iteration-count: infinite;
  transition: 1s;

  .showtrun {
    font-size: 0.4rem;
    height: 100vh;

    .navarea:hover {
      border-bottom: 2px solid #fff;
    }
  }
}
.leftnavtow {
  background-color: rgba(255, 255, 255, 0.5);
  color: rgb(0, 0, 0);
  animation-name: leftnavtow;
  animation-duration: 4s;
  opacity: 0.5;
  animation-iteration-count: infinite;
  transition: 1s;
  .showtrun {
    font-size: 0.4rem;
    height: 100vh;
    .navarea:hover {
      border-bottom: 2px solid rgb(0, 0, 0);
    }
  }
}
.cancel {
    width: 5%;
    position: absolute;
    top: 5%;
    right: 5%;
  }
@keyframes leftnavtow {
  0% {
    background-color: rgba(255, 255, 255, 0);
  }
  50% {
    background-color: rgba(255, 255, 255, 0.7);
  }
  100% {
    background-color: rgba(255, 255, 255, 0);
  }
}
@keyframes leftnav {
  0% {
    background-color: rgba(17, 17, 17, 0);
  }
  50% {
    background-color: rgba(17, 17, 17, 0.7);
  }
  100% {
    background-color: rgba(17, 17, 17, 0);
  }
}
</style>